<template>
	<view class="main">
		<uv-sticky bgColor="#fff" ref="backTop" top="300">
			<uv-tabs lineColor='#2c9b94' :activeStyle="{'color':'#2c9b94'}" :list="tabList" @change='changeTab'></uv-tabs>
		</uv-sticky>
		<view class="contV">
			<view class="contVi" v-for="(i,o) in mainList" :key="o" @click="openDetile(i)">
				<view class="contVit">{{i.title}}</view>
				<view class="contVic">
					<view class="contVici"><uv-icon name="account" />{{i.auth}}</view>
					<view class="contVici"><uv-icon name="clock" />{{i.date}}</view>
					<view class="contVici"><uv-icon name="eye" />{{i.num}}</view>
				</view>
			</view>
		</view>
		<uv-back-top :scroll-top="scrollTop" icon="arrow-up" :customStyle="customStyle"
			:iconStyle="iconStyle"></uv-back-top>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				customStyle: {
					backgroundColor: '#2c9b94',
				},
				iconStyle: {
					fontSize: '24rpx',
					color: '#fff',
				},
				tabList: [{
					name: '推荐'
				}, {
					name: '健康科普'
				}, {
					name: '生活小妙招'
				}],
				mainList: [{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
					{
						id: 1,
						title: '关于三高与糖尿病等常见健康隐患的预防措施',
						auth: '中老年科',
						date: '2023-04-14',
						num: 32
					},
				]
			}
		},
		onLoad() {
			this.getMainList()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			changeTab(item) {
				console.log(item)
			},
			getMainList() {

			},
			openDetile(item) {
				uni.navigateTo({
					url: `/pages/information/informationInfo?id=${item.id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: #f5f5f5;

		.contV {
			.contVi {
				width: 710rpx;
				margin: 10rpx 0;
				padding: 20rpx;
				background-color: #fefefe;

				.contVit {
					color: #333;
					font-size: 32rpx;
					margin-bottom: 30rpx;
				}

				.contVic {
					display: flex;
					align-items: center;
					color: #666;
					font-size: 24rpx;

					.contVici {
						display: flex;
						align-items: center;
						margin-right: 30rpx;

						&:last-of-type {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>